<template>
  <div>
    <div class="toggle">
      <span :class="{active:isActive('/xgsd')}" @click="tolink('/home/zx/xgsd')">新歌速递</span>
      <span :class="{active:isActive('/xdsj')}" @click="tolink('/home/zx/xdsj')">新碟上架</span>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data(){
    return{
    
    }
  },
methods:{
  tolink(path){
    this.$router.push(path)
  }
},computed:{
  isActive(){
    return function(path){
      return this.$route.path.includes(path)
    }
  }
}
};
</script>

<style scoped>
.toggle {
  margin: 0 auto;
  width: 300px;
  height: 35px;
  line-height: 35px;
  border: 1px solid #ccc;
  border-radius: 17.5px;
}
.toggle span {
  display: inline-block;
  text-align: center;
  width: 148.67px;
  border-radius: 17.5px;
  cursor: pointer;
}
.active {
  background-color: #ccc;
  color: white;
}
</style>